<template>
  <el-dialog
    class="dialogModel"
    title="应用中心新增"
    :visible.sync="dialogAppCenterVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="handleClose"
  >
    <el-card class="box-card el-card-flex dialogCard">
      <div slot="header" class="clearfix">
        <el-input clearable v-model="sysName" placeholder="请搜索..." style="width: 210px; float: right" @keyup.enter.native="appCenterOptionsSearchEvent" @clear="appCenterOptionsSearchEvent">
          <el-button slot="append" icon="el-icon-search" @click="appCenterOptionsSearchEvent"></el-button>
        </el-input>
      </div>
      <div class="text item checkbox">
        <el-checkbox-group v-model="checkedAppCenter">
          <el-checkbox border v-for="item in appCenterOptions" :label="item.sysId" :key="item.sysId">{{item.sysName}}</el-checkbox>
        </el-checkbox-group>
      </div>
    </el-card>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleCheck(true)">
        确定
        <i class="el-icon-document-checked el-icon--right"></i>
      </el-button>
      <el-button @click="handleCheck(false)">
        取消
        <i class="el-icon-refresh-left"></i>
      </el-button>
    </span>
  </el-dialog>
</template>
<script>
import { Dialog, Table, TableColumn, MessageBox, Message, TabPane, Collapse, CollapseItem, Tag } from 'element-ui'
import { tieUserGroupDataAuth, getAppCenterAuth, getSysComboBox } from '@/api/authority/userAuthorization/userAuthorization.js'
export default {
  props: ['dialogAppCenterVisible', 'dialogAppCenterGroup', 'orgDate'],
  data () {
    return {
      checkedAppCenter: [],
      appCenterOptions: [],
      authIds: [],
      sysName: '' // 搜索model值
    }
  },
  mounted() {
    this.appCenterOptionsEvent()
  },
  methods: {
    // 新增获取所有的应用中心名称数据
    appCenterOptionsEvent() {
      getSysComboBox().then(res => {
        // console.log(res)
        this.appCenterOptions = res.data.data
      })
    },
    // 搜索应用中心名称
    appCenterOptionsSearchEvent () {
      getAppCenterAuth(this.sysName).then(res => {
        // console.log(res)
        this.appCenterOptions = res.data.data.records
      })
    },
    // 弹框关闭提示框
    handleClose () {
      // MessageBox.confirm('确认要关闭弹框吗？')
      //   .then(() => {
          this.checkedAppCenter = []
          this.$emit('dialogHideAppCenter', false)
          this.sysName = ''
				  this.appCenterOptionsEvent()
        // })
        // .catch(() => {})
    },
    // 弹框点击按钮
    handleCheck (result) {
      if (!result) {
        return this.handleClose()
      } else {
        let authIds = []
        this.orgDate.forEach(v => authIds.push(v.sysId))
        this.checkedAppCenter.forEach(v => {
          let isRepeace = false
          for (let i = 0; i < this.orgDate.length; i++) {
            if (this.orgDate[i].sysId === v) {
              isRepeace = true
              break
            }
          }
          if (!isRepeace) authIds.push(v)
        })
        tieUserGroupDataAuth({
          authIds: authIds,
          id: this.dialogAppCenterGroup,
          type: 'de92d052cfe84aaca3b8752e235bdb69'
        }).then(res => {
          if (res.data.code === 10000) {
            Message.success('新增成功')
            this.$emit('dialogHideAppCenterData', this.checkedAppCenter)
            this.sysName = ''
				    this.appCenterOptionsEvent()
          }
        })
        this.checkedAppCenter = []
        return this.$emit('dialogHideAppCenter', false)
      }
    }
  },
  components: {
    'el-dialog': Dialog, // 对话框
    'el-table': Table, // 表格
		'el-table-column': TableColumn, // 表格列
		'el-tab-pane': TabPane, // 标签页
		'el-collapse': Collapse, // 折叠面板
		'el-collapse-item': CollapseItem, // 折叠面板列
		'el-tag': Tag // 标签
  },
}
</script>
<style lang="scss">
.dialogModel{
  .el-dialog{
    .el-dialog__body{
      padding: 0px 20px 60px;
    }
  }
}
.dialogCard{
  border: none;
  box-shadow: none;
  .el-card__header{
    border-bottom: none;
  }
  .el-card__body{
    .text.item{
      padding: 0;
    }
  }
  .checkbox{
    .el-checkbox {
      margin: 6px 0 6px 10px;
    }
  }
}
.dialogCard.is-always-shadow{
  -webkit-box-shadow: none; 
  box-shadow: none;
}
</style>